<template>
    <selection :visible="getTables.length>0">
        <span slot='header'>资源</span>
        <div slot='body'>
            <div class="property-item-body">
               
                <selection :visible="getTables.length>0">
                    <span slot='header'>资源列表</span>
                    <div slot='body'>
                         <div v-for="(item,index) in tableUrls" :key="index" @click="formatUrl(item,index)">
                            <span class="item">
                                <span class="key">{{ index }}</span>
                                <span class="value">
                                    <input type="text" :value="item">
                                </span>
                                &nbsp;&nbsp;
                                <el-button type="danger" size="mini" circle class="btn">
                                    <i class="fa fa-trash"></i>
                                </el-button>
                            </span>
                        </div>
                    </div>
                </selection>
                
                <selection :visible="conditions?true:false">
                    <span slot='header'>编辑</span>
                    <div slot='body' style="padding:0px;margin:-px">
                       
                        <div v-for="(item,index) in conditions" :key="index" class="cond-box">
                            <el-row>
                                <el-col :span="12">
                                    <el-select v-model="item.field"  placeholder="请选择活动区域" size="mini">
                                        <el-option label="添加时间" value="client_add_dt"></el-option>
                                        <el-option label="网咨" value="client_counselor"></el-option>
                                        <el-option label="添加平台" value="client_platform"></el-option>
                                        <el-option label="账户" value="client_account"></el-option>
                                        <el-option label="客户姓名" value="client_name"></el-option>
                                        <el-option label="性别" value="client_gender"></el-option>
                                        <el-option label="电话" value="client_phone"></el-option>

                                        <el-option label="微信/QQ" value="client_wechat_qq"></el-option>
                                        <el-option label="咨询项目" value="client_consult_project"></el-option>
                                        <el-option label="派单级别" value="client_orders_level"></el-option>
                                        <el-option label="预约时间" value="client_appointment_date"></el-option>
                                        <el-option label="到诊时间" value="client_visit_date"></el-option>
                                        <el-option label="到诊人数" value="client_visit_numbers"></el-option>

                                        <el-option label="成交类型" value="client_bargain_type"></el-option>
                                        <el-option label="现场咨询" value="client_locale_consult"></el-option>
                                        <el-option label="金额" value="client_down_payment"></el-option>
                                        <el-option label="付费类型" value="client_visit_type"></el-option>
                                        <el-option label="回访时间" value="client_return_visit_date"></el-option>
                                        <el-option label="备注" value="client_remarks"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="12">
                                     <el-select v-model="item.role" placeholder="请选择活动区域" size="mini">
                                        <el-option label="模糊" value="like"></el-option>
                                        <el-option label="单独" value="one"></el-option>
                                        <el-option label="多个" value="many"></el-option>
                                        <el-option label="区域" value="between"></el-option>
                                        <el-option label="大于" value="greater"></el-option>
                                        <el-option label="小雨" value="less"></el-option>
                                        <el-option label="排除" value="notIn"></el-option>
                                        <el-option label="空" value="null"></el-option>
                                        <el-option label="非空" value="notNull"></el-option>
                                        <el-option label="数量" value="count"></el-option>
                                    </el-select>
                                </el-col>
                                <br><br>
                                <el-col :span="24">
                                    <el-input type="textarea" v-model="item.value"></el-input>
                                </el-col>
                            </el-row>
                            
                        </div>
                    </div>
                </selection>
                
            </div>
        </div>
    </selection>
</template>

<script>
import {mapMutations,mapGetters} from 'vuex';
import Selection from '../../common/selection.vue';

export default {
    data(){
        return{
            currentSourceUrl:'',
            conditions:{},

            base_path:''
        }
    },
    computed:{
        ...mapGetters(['getDialogStatus','getCurrentActiveTable','getTables']),
        tableUrls(){
            if(this.getTables.length>0  &&  this.getCurrentActiveTable){
                return this.getCurrentActiveTable.table.sourceURL
            }else{
                return [];
            }
        }
    },

    watch:{
        conditions:{
            handler(newVal,oldVal){

                let strProps='';
                for(let i in newVal){
                    strProps+=`${newVal[i].field}[role]=${newVal[i].role}`;
                    strProps+=`&`;
                    strProps+=`${newVal[i].field}[value]=${newVal[i].value}`;
                    strProps+=`&`;
                }
                let url=this.base_path+strProps;
                //console.log(url);
                this.updateUrl({
                    tableIndex:this.getCurrentActiveTable.index,
                    urlIndex:this.currentIndex,
                    data:url
                });
                //this.getCurrentActiveTable.index,this.currentIndex,url
            },
            deep:true
        }
    },

    methods:{
        ...mapMutations(['updateUrl']),
        //http://admin.jinggangym.com/api/v1/search?client_add_dt[role]=like&client_add_dt[value]=2018-11&client_counselor[role]=like&client_counselor[value]=王嫣文&
        formatUrl(url,index){
            
            this.currentIndex=index;//记住下标

            this.conditions=[];
            let base_path='',props=[];
            let tempProps=[],conditions=[];
            this.currentSourceUrl=url;

            let reg_base_path=/http(\S*)\?/; //基础地址
            let reg_props=/\?(\S*)&/; //参数字符串
            

            base_path=this.currentSourceUrl.match(reg_base_path)[0];

            this.base_path=base_path;
            //console.log(base_path);
            props=this.currentSourceUrl.match(reg_props)[0];
            props=props.substring(1,props.length-1);//去头去尾
            props=props.split('&');//通过&符号拆分成数组
            //console.log(props);
            
            for(let i in props){
                let key=/(\S*)\[/;
                let role=/\[(\S*)\]/;
                let value=/\=(\S*)/;
                tempProps.push([props[i].match(key)[1],props[i].match(role)[1],props[i].match(value)[1]]);
            }
            //console.log(tempProps);
            for(let i in tempProps){
                let isExist=false,tempIndex=0;
                for(let j in conditions){
                    if(tempProps[i][0]==conditions[j].field){
                        isExist=true;
                        tempIndex=j;
                        break;
                    }
                }
                if(!isExist){
                    conditions.push({
                        field:tempProps[i][0],
                        role:'',
                        value:''
                    });
                    conditions[conditions.length-1][tempProps[i][1]]=tempProps[i][2]
                }else{
                    conditions[tempIndex][tempProps[i][1]]=tempProps[i][2];
                }
            }
            for(let i in conditions){
                this.$set(this.conditions,i,conditions[i]);
            }
        },

    },
    components:{
        Selection
    },
}
</script>

<style>
.cond-box{
    background: #909399;
    margin-top: 5px;
    padding: 5px;
    border-radius: 5px;
    position: relative;
}
.el-input__inner{
    margin-top: 3px;
    width: 100%;
}
</style>
